<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8"/>
    <title>我的课程</title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
    <link rel="shortcut icon"  href="favicon.ico">
    <script th:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
    <script th:src="@{jquery.validate.js}" type="text/javascript"></script>
    <script th:src="@{messages_zh.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

    <style>
        .tr_style{
            font-size: large;
            color: rgba(89,192,255,0.52);
            font-family: Monaco;
        }
        body{
            background-color: rgba(216,216,216,0.81);
        }
        .show{
            width:270px;
            height: 200px;
            margin: 5px 15px 10px 0;
            color: black;
            float: left;
            /*border: 2px solid red;*/
            /*border-radius:25px;*/
            background-image: url(course.jpg);
        }
        .title{
            position:relative;
            top:10px;
            text-align: center;
            font-family: Monaco;
            font-size: large;
        }
        .content{
            position:relative;
            margin: 7px 0 0 0;
            text-align: left;
            font-family: Monaco;
            font-size: large
        }
        .foot{
            position:relative;
            height: 25px;
        }
        .foot a:link { color: #28a4c9;font-size: 20px;}		/* 未被访问的链接 */
        .foot a:hover {color: #66afe9}	/* 鼠标指针移动到链接上 */
    </style>
    <script>
        $(function(){
            $("#banner li a:not(#drop)").mouseover(function(){
                $(this).css("color","black");
            });
        });
        $(function(){
            $("#banner li a:not(#drop)").mouseout(function(){
                $(this).css("color","white");
            });
        });
        $(function() {
            $(".show").mouseover(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 3px 3px 3px #888888 ");
                $(this).css("position","relative");
                $(this).css("top","-1px");
            });

            $(".show").mouseout(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 0 0");
                $(this).css("position","relative");
                $(this).css("top","1px");
            });
        });
    </script>
</head>





<body>


<div class="container">
    <th:block th:include="/index :: header"></th:block>

    <div th:if="${not #lists.isEmpty(checks)}" style="font-size:x-large;font-family:InputMono;color: green" th:text="${student}+'同学,这是您的课程信息!'">
    </div>
    <div th:if="${#lists.isEmpty(checks)}" style="font-size:x-large;font-family:InputMono;color: green" th:text="${student}+'同学,抱歉您还未添加任何课程!'">
    </div>

    <div th:if="${not #lists.isEmpty(checks)}">

        <div th:each="check : ${checks}" class="show" >
            <div th:text="${check.cname}" class="title"></div>
            <div style=" margin: 7px 0 0;padding: 1px;width: 270px;height: 140px">
                <div><span class="glyphicon glyphicon-th" style="color: rgb(0,0,0);"></span>
                <span th:text=" '课程号: '+${check.cno}" class="content"></span></div>
                <div><span class="glyphicon glyphicon-th" style="color: rgb(0, 0, 0);"></span>
                <span th:text=" '课堂号: '+${check.classroom}" class="content"></span></div>
                <div><span class="glyphicon glyphicon-list-alt" style="color: rgb(0, 0, 0);"></span>
                <span th:text=" '出勤/考勤: '+${check.attend_times}+'/'+${check.total}" class="content"></span></div>
            </div>
            <div class="foot">
                <span ><a th:href="@{/Record(cno=${check.cno})}" id="join" style="color: #2aabd2">我的记录</a></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span ><a th:href="@{/RemoveCourse(cno=${check.cno})}"onclick="if(confirm('确定退出吗?')==false)return false;" id="join" style="color: rgba(204,53,35,0.82)">退出课程</a></span>
            </div>
        </div>
    </div>

    <div style="font-size:x-large;font-family:InputMono;color: green;clear: both" th:text="${message}">
    </div>
    <div th:if="${not #lists.isEmpty(checks)}" style="font-size:medium;font-family:Monaco;color: red">
        (注意:退出课程会清空您在该课堂下的所有签到记录!)
    </div>
</div>
</body>
</html>